<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">


</head>
<body>
  <h1>学生信息</h1>
  <table class="table table-bordered" id="stuTable"></table>



  <script src="/js/jquery-3.4.1.min.js"></script>
  <script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
  <script>

      /**
       * 显示学生列表
       */
      function loadTable(){
          $("#stuTable").bootstrapTable({
              url: '/webapi/student/getbypage',
              striped:true, //设置为ture有隔行变色效果
              pagination:true,//设置为true会在底部显示分页条
              singleSelect: false,//设置为true将禁止多选
              pageSize:3,   //设置分页的每页条数
              pageNumber:1, //设置了分页，首页页码
              uniqueId : "id", //每一行的唯一标识，一般为主键列
              sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
              queryParams:function (params){
                  let paraObj = {
                      size: params.limit,
                      page: params.offset/params.limit,
                      sort: "id",
                      direct: "asc",

                  };
                  return paraObj;
              },
              onLoadError:function (rs){
                  console.log(rs)
                  if (rs.code == 403){
                      window.location.href = "../../templates/login/user.html"
                  }
              },
              responseHandler:function (res){
                  console.log(res.data)
                  return {
                      "total": res.data.total, // 总页数
                      "rows": res.data.rows    // 数据
                  }
              },
              columns:[{
                  field: "id",
                  title: "序号"
              },{
                  field: "sno",
                  title: "学号"
              },{
                  field: "sname",
                  title: "姓名"
              },{
                  field: "sex",
                  title: "性别"
              },{
                  field: "sage",
                  title: "年龄"
              },{
                  field: "classid",
                  title: "班级号"
              },{
                  field: "gradeid",
                  title: "年级号"
              },{
                  field: "mid",
                  title: "专业编号"
              }]
          })
      }

      function search(){
          $("#stuTable").bootstrapTable("destroy");
          loadTable();
      }

      $(function (){
          loadTable()
      })
  </script>
</body>
</html>